<template>
  <div class="home">
    <div class="a1">
      <h3>登录</h3>
      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username" class="aa">
          <el-input type="username" v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="aa">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="sms_code" class="a2" style="width:305px">
          <el-input v-model="ruleForm.img_code" style="width:180px"></el-input>
          <img :src="img" @click="SmsCode" alt="" style="width: 125px">
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
      <a href="/forgetpwd">忘记密码</a>
    </div>
  </div>
</template>

<script>
import { v4 as uuid4 } from "uuid";
import Axios from "axios";
export default {
  name: "",
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        img_code: "",
        uuid:'',
      },
      img:'',
      img_code: "",
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.SmsCode()
  },

  methods: {
    SmsCode() {
      let uuid = uuid4();
      this.ruleForm.uuid = uuid
      this.img = "http://127.0.0.1:8000/api/users/image_code/" + uuid + "/";
    },
    submitForm() {
      Axios.post("http://127.0.0.1:8000/api/users/login/", this.ruleForm)
        .then((res) => {
          console.log("用户登录的响应:", res.data);
          if (res.data.code == 200) {
            this.$notify({
              title: "成功",
              message: "登录成功！",
              type: "success",
            });
            localStorage.setItem("refresh_token", res.data.refresh_token);
            localStorage.setItem("token", res.data.token);
            this.$router.push('/home')	//登录验证成功路由实现跳转
          } else {
            this.$notify.error({
              title: "错误",
              message: res.data.message,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
.aa {
  width: 400px;
}
.a2{
  width: 200px;
}
.a1 {
    background-color: rgb(63, 240, 216);
    width: 600px;
    height: 500px;

}
</style>